<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
     <!-- 准备一个容器：容器就是显示图标区域 -->
     <div class="box1"></div>
     <div class="box2"></div>
</body>
</html>
<script>
     //基于准备好的DOM初始化echarts实例
     let dom1 = document.querySelector('.box1');
     let dom2 = document.querySelector('.box2');
     //创建echarts实例
     let mycharts1 = echarts.init(dom1);
     let mycharts2 = echarts.init(dom2);
     //指定图表的配置项与数据
     mycharts1.setOption({
           //图表的标题
           title:{
               //主标题的设置
              text:'数据可视化',
              //子标题
              subtext:"echarts基本使用",
              //主标题的颜色
              textStyle:{
                  color:'cyan'
              },
              //设置标题位置
              left:'center'
           },
           //x轴的配置项
           xAxis:{
               //数据
               data:["衣服",'直播','游戏','电影']
           },
           //y轴的配置项
           yAxis:{
               //显示Y轴的线
               axisLine:{
                   show:true
               },
               //显示Y轴刻度
               axisTick:{
                   show:true
               }
           },
           //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
           series:[
                { 
                    //图表类型的设置
                    type:"bar",
                    //图表的数据 bar柱状图  line折线图 pie饼图
                    data:[10,20,30,40],
                    color:'red'
                }
           ]
     });
     //第二个图表的配置项
     mycharts2.setOption({
          title:{
              //主标题
              text:"折线图",
              left:'center',
              textStyle:{
                  color:'red'
              },
              subtext:'echarts基本使用',
              subtextStyle:{
                  color:'cyan'
              }
          },
          //x轴
          xAxis:{
               data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
          },
          yAxis:{},
          //图表类型与数据
          series:[
              {
                   type:'line',
                   data:[10,20,15,44,2,19,100],
                   color:'cyan'
              }
          ]
     })
</script>